<template>
	<view class="withdraw">
		<view class='header'>
			<view class='headerCon'>
				<view class='cumulative center'>
					<view class='item' style="color: #fff;">
						<view>剩余积分</view>
						<view class='money'>{{integralCount}}</view>
					</view>
					<view class="price   center">
						<image :src="moenyIcon" class="auto-img"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="lst-hint">积分明细</view>
		
		<view class="lst-block">
			<view class="item" v-for="(item,index) in lst" :key="index">
				<view class="left-option">
					<view class="shop-name">{{item.title}}</view>
					<view class="time">{{getDate(item.creation_time)}}</view>
				</view>
				<view class="right-price">
					{{item.status==0?'-':'+'}}{{item.number}}
				</view>
			</view>
		</view>
		
		<view style="height: 90rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				moenyIcon: require('@/static/public/money.png'),
				page:0,
				lst:[],
				userInfo:{},
				integralCount:0,
			}
		},
		onShow() {
			this.init()
			this.getUserInfo()
		},
		methods: {
			getUserInfo(){
				let userInfo=uni.getStorageSync('userInfo')
				this.integralCount=userInfo.integral
			},
			init() {
				this.$http('integral.getIntegralRecord', {
					token: this.$tools.getToken(),
					page:this.page,
				}).then(res => {
					console.log('res', res)
					if (res.code == 200) {
						this.lst = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdraw {
		padding: 0 32rpx;
	}

	.header {
		margin-top: 32rpx;
		height: 330rpx;
		background-image: linear-gradient(to right, #f33b2b 0%, #f36053 100%);
		border-radius: 16rpx;

		box-sizing: border-box;
		color: rgba(255, 255, 255, 0.6);
		font-size: 24rpx;
	}

	.headerCon {
		background-image: $moneyBg;
		background-repeat: no-repeat;
		background-size: 100%;
		height: 100%;
		width: 100%;
		padding: 36rpx 0 29rpx 0;
		box-sizing: border-box;
	}



	.account {
		padding: 0 35rpx;
	}

	.money {
		font-size: 72rpx;
		color: #fff;
		font-family: 'Guildford Pro';
		margin-top: 15rpx;
	}



	.cumulative {
		margin-top: 120rpx;
		width: 100%;
	}

	.item {
		flex: auto;
		font-size: 30rpx;
		padding-left: 35rpx;
	}

	.money {

		font-size: 48rpx;
		color: #fff;
		margin-top: 26rpx;

	}

	.price {
		flex: none;
		width: 122rpx;
		height: 122rpx;
		margin-right: 35rpx;
	}

	.lst-hint {
		margin-top: 32rpx;
		background-color: #f5f5f5;
		height: 80rpx;
		font-size: 24rpx;
		color: #666;
		line-height: 88rpx;
		padding-left: 24rpx;
	}

	.lst-block {
		padding: 0 24rpx;

		.item {
			padding: 24rpx 0;
			background: #fff;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #f5f5f5;

			.left-option {
				flex: auto;
				font-size: 28rpx;

				.shop-name {
					color: #282828;
				}

				.time {
					color: #999999;
					margin-top: 12rpx;
				}
			}

			.right-price {
				flex: none;
				font-size: 30rpx;
				color: #fc4141;
			}
		}
	}
</style>
